<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>lzy-</title>
    <script src="jquery-3.1.1.js"></script>
	<style type="text/css">
		body {
			/*12号文字，1.5倍行高， Tahoma无衬线字体*/
            font: 12px/1.5 Tahoma;
        }
		#outer{
			width: 400px;
			margin: 0 auto;
			font-size: 14px;
		}
		#tab{
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: black;
			border: 1px solid #000;
		}
		#tab li{
			float: left;
			color: white;
			width: 80px;
			height: 30px;
			list-style: none;
			line-height: 30px;
			text-align: center;
			cursor: pointer;
		}
		#tab li.current{
			background-color: lightgray;
			color: black;
		}
		#content{
			border: 1px solid #000;
			border-top: none;
		}
		#content ul{
			margin: 0 30px;
			padding: 10px 0;
			line-height: 200%;
			display: none;
		}
		#content ul:first-child{
			display: block;
		}
	</style>
</head>
<body>
	<div id="outer">
		<ul id="tab">
			<li class="current" data='0'>第一节</li>
			<li data='1'>第二节</li>
			<li data='2'>第三节</li>
		</ul>
		<div id="content">
			<ul>
				<li>这是一段新闻1,新闻的标题1</li>
				<li>这是一段新闻2,新闻的标题2</li>
				<li>这是一段新闻3,新闻的标题3</li>
				<li>这是一段新闻4,新闻的标题4</li>
				<li>这是一段新闻5,新闻的标题5</li>
				<li>这是一段新闻6,新闻的标题6</li>
			</ul>
			<ul>
				<li>这是一段新闻1,新闻的标题1</li>
				<li>这是一段新闻2,新闻的标题2</li>
				<li>这是一段新闻3,新闻的标题3</li>
				<li>这是一段新闻4,新闻的标题4</li>
				<li>这是一段新闻5,新闻的标题5</li>
				<li>这是一段新闻6,新闻的标题6</li>
				<li>这是一段新闻7,新闻的标题7</li>
				<li>这是一段新闻8,新闻的标题8</li>
				<li>这是一段新闻9,新闻的标题9</li>
				<li>这是一段新闻10,新闻的标题10</li>
			</ul>
			<ul>
				<li>这是一段新闻1,新闻的标题1</li>
				<li>这是一段新闻2,新闻的标题2</li>
				<li>这是一段新闻3,新闻的标题3</li>
				<li>这是一段新闻4,新闻的标题4</li>
				<li>这是一段新闻5,新闻的标题5</li>
				<li>这是一段新闻6,新闻的标题6</li>
				<li>这是一段新闻7,新闻的标题7</li>
				<li>这是一段新闻8,新闻的标题8</li>
			</ul>
		</div>
	</div>	
</body>
</html>
<script>
    $('#tab li').mouseover(function(){
       var index= $(this).attr('data');
       $('#content ul').eq(index).show().siblings().hide();
       $(this).css({
           'color':'black',
           'backgroundColor':'lightgray'
       }).siblings().css({
            'color':'white',
            'backgroundColor':'black'
       })
    })
        
   

</script>